<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }
        .el-tabs__content{
            height: 400px;
        }
        .el-transfer-panel{
            width: 400px;
        }
    </style>
</head>

<body>
	<div id="app">

		<el-row>
			<el-col :span="20">
				<el-menu theme="light" class="el-menu-demo" mode="horizontal">
					<el-menu-item index="1">
						<el-button type="primary" size="large" icon="search" @click="query">检索</el-button>
						<el-button type="primary" size="large" @click="saveBomData">保存</el-button>
						<el-button type="primary" size="large" @click="clearData">清除</el-button>
						<el-button type="primary" size="large" icon="delete" @click="deleteBom">删除</el-button>
					</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="4">
				<el-menu theme="light" class="el-menu-demo" mode="horizontal">
					<el-menu-item index="2"><span style="font-size: 2em;">物料清单维护</span></el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
		
		<el-form :inline="true" :model="bomForm" label-suffix=":" style="padding:20px 10px 0px 10px" label-width="150px">
			<input type="hidden" id="bomIdHidden" value=""/>
			<el-row >
				<el-col :span="12">
					<el-form-item label="类型">
						<template>
							<el-select v-model="bomForm.bomType" placeholder="请选择">
								<el-option
										v-for="item in bomTypeList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-form-item label="物料清单">
						<el-input v-model="bomForm.id" icon="search" :on-icon-click="itemBomSearch">
						</el-input>
					</el-form-item>
				</el-col>

				<!-- BOM检索弹出框 -->
				<el-dialog title="物料清单" :visible.sync="itemBomSearchDialog" top="5%">
					<el-table :data="ItemBomData" @row-dblclick="selectedRowBom" border style="width: 100%" height="600">
						<el-table-column property="id" label="物料清单" width="230"></el-table-column>
						<el-table-column property="name" label="描述" width="300"></el-table-column>
						<el-table-column property="version" label="版本" width="200"></el-table-column>
					</el-table>
				</el-dialog>

				<el-col :span="12">
					<el-form-item label="版本">
						<el-input v-model="bomForm.version" placeholder="版本"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row type="flex">
				<el-form-item label="描述">
					<el-input type="textarea" v-model="bomForm.name"></el-input>
				</el-form-item>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="状态">
						<template>
							<el-select v-model="bomForm.statusFk" placeholder="请选择">
								<el-option
										v-for="item in statusList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item>
						<template>
							<el-checkbox v-model="bomForm.curVersion">当前版本</el-checkbox>
						</template>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template>
			<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="组件信息" name="first">
					<el-row style="margin:0px 0px 5px 10px;">
							<el-button type="primary" size="middle" @click="addNewComponent">插入新项</el-button>
							<el-button type="primary" size="middle" @click="removeComponent">移除</el-button>
							<el-button type="primary" size="middle" >在此之前插入</el-button>
					</el-row>
					<el-row>
						<el-col :span="22">
							<template>
								<el-table
										ref="componentMultipleTable"
										:data="itemData"
										height="400" border stripe
										tooltip-effect="dark"
										@selection-change="selectBomDetailChange"
										style="width: 100%">
									<el-table-column
											type="selection"
											width="55">
									</el-table-column>
									<el-table-column
											prop="sequence"
											label="顺序"
											show-overflow-tooltip>
									</el-table-column>
									<el-table-column
											prop="assyItem"
											label="组件/版本"
											show-overflow-tooltip>
									</el-table-column>
									<el-table-column
											prop="assyOper"
											label="装配操作"
											show-overflow-tooltip>
									</el-table-column>
									<el-table-column
											prop="assyQty"
											label="装配数量"
											show-overflow-tooltip>
									</el-table-column>
									<el-table-column
											prop="componentType"
											label="组件类型"
											show-overflow-tooltip>
									</el-table-column>
									<el-table-column
											label="查看/修改"
											show-overflow-tooltip>
										<template scope="scope">
											<el-button
													size="small"
													@click="editBomComponent(scope.$index, scope.row)">编辑</el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-col>
					</el-row>

				</el-tab-pane>
				<el-tab-pane label="自定义字段" name="second">
					自定义字段
				</el-tab-pane>
			</el-tabs>
		</template>
		
		<el-dialog title="新添加组件" :visible.sync="bomComponentDialog">
			<el-form :model="bomComponentForm" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="装配顺序">
							<el-input v-model="bomComponentForm.sequence" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="装配操作">
							<el-input placeholder=""
									  icon="search"
									  v-model="bomComponentForm.assembleOperationFk"
									  :on-icon-click="handleIconClick"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="组件">
							<el-input placeholder=""
									  icon="search"
									  v-model="bomComponentForm.materialFK"
									  :on-icon-click="materialSearch"></el-input>
						</el-form-item>
					</el-col>

					<!-- 组件检索弹出框 -->
					<el-dialog title="物料组件" :visible.sync="materialSearchDialog" top="5%">
						<el-table :data="materialData" @row-dblclick="selectedRowMaterial" border style="width: 100%" height="600">
							<el-table-column property="id" label="物料" width="230"></el-table-column>
							<el-table-column property="name" label="描述" width="300"></el-table-column>
							<el-table-column property="version" label="版本" width="200"></el-table-column>
						</el-table>
					</el-dialog>

					<el-col :span="12">
						<el-form-item label="版本">
							<el-input v-model="bomComponentForm.materialVersion" auto-complete="off" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="组件类型:">
							<template>
								<el-select v-model="bomComponentForm.bomComponentType" placeholder="请选择">
									<el-option
											v-for="item in componentTypeList"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="拆卸操作">
							<el-input placeholder=""
									  icon="search"
									  v-model="bomComponentForm.disassembleOperationFk"
									  :on-icon-click="handleIconClick"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="装配数量">
							<el-input v-model="bomComponentForm.qty" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="装配数据类型">
							<el-input placeholder=""
									  icon="search"
									  v-model="bomComponentForm.assyDataTypeFk"
									  :on-icon-click="handleIconClick"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="组件最大使用数">
							<el-input v-model="bomComponentForm.maximumUsage" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="最大不合格计数">
							<el-input v-model="bomComponentForm.maximumNc" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="按需装配数量">
							<template>
								<el-checkbox v-model="bomComponentForm.assembleAsReq"></el-checkbox>
							</template>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="bomComponentDialog = false">取 消</el-button>
				<el-button type="primary" @click="saveComponentData">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="index.js"></script>
<script type="text/javascript" src="mock.js"></script>
  <script src="axios.js"></script>

<script type="text/javascript" src="bom.js"></script>

</html>